<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>

<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script> -->
<script>
  let charts = echarts.init(document.getElementById('box'));
  var data2 = [{
    name: "自然资源厅",
    qq: "首层",
    label: {
      backgroundColor: '#48a9ee',
      width: 50,
      formatter(obj) {
        console.log(obj)
        return obj.data.qq
        // return obj.name.length > 3 ? obj.name.slice(0, 3) + '...' : obj.name
      }
    },
    symbol: 'triangle',
    children: [{ //子集
      name: "娱乐场所治安管理",

      lineStyle: {
        color: 'red',
        type: 'dashed'
      },
      children: [{ //子集
        name: "娱乐场所治安管理工作",
        label: {
          backgroundColor: 'yellow'
        },
        children: [{ //子集
          name: "测试123",
          label: {
            backgroundColor: 'green'
          },
        }]
      }]
    }, {
      name: "安保工作",
      children: [{
        name: "输油气管道安保工作"
      }, {
        name: "校园安保工作"
      }, {
        name: "节假日、重大活动、大型群众性活动安保和敏感期社会面管控工作"
      }]
    }, {
      name: "精神病人管控工作",
      children: [{
        name: "精神病人肇事肇祸案事件"
      }]
    }, {
      name: "物流寄递业",
      children: [{
        name: "物流寄递业治安管理工作"
      }]
    }, {
      name: "推进基层基础工作创新",
      children: [{
        name: "加强派出所建设"
      }]
    }, {
      name: "地网建设工作",
      children: [{
        name: "加强二轮电动车防盗登记备案装置安装工作"
      }]
    }, {
      name: "无人机管理",
      children: [{
        name: "加强无人机管理"
      }]
    }, {
      name: "加强社会面巡逻防控",
      children: [{
        name: "武装联勤巡逻"
      }]
    }]
  }];

  let option = {
    tooltip: {},
    series: [{
      type: 'tree',
      orient: "TB",
      edgeShape: 'curve', //对应的取值是 curve 和 polyline.
      data: data2,
      symbol: 'rect',
      symbolSize: 30
    }]
  }
  charts.setOption(option)
</script>